﻿@import "variables";

@each $name, $value in $theme-colors {
    $color: $value;

    .custom-switch {
        .custom-control-input {
            &:checked {
                &.custom-control-input-#{$name} ~ .custom-control-label::after {
                    background-color: $color;
                }

                &.custom-control-input-#{$name} ~ .custom-control-track {
                    background-color: rgba($color,.25);
                }
            }

            &:disabled {
                &.custom-control-input-#{$name} ~ .custom-control-label::after {
                    background-color: #bdbdbd;
                }

                &.custom-control-input-#{$name} ~ .custom-control-track {
                    background-color: rgba(#bdbdbd,.25);
                }
            }
        }
    }
}

@mixin switch($size) {
    $switch-handle-width: 1.25rem !default;
    $switch-handle-shadow: 0 3px 1px -2px rgba($black, 0.2), 0 2px 2px 0 rgba($black, 0.14), 0 1px 5px 0 rgba($black, 0.12) !default;
    $switch-height: 0.875rem !default;
    $switch-transition: 90ms cubic-bezier(0.4, 0, 0.2, 1) !default;
    $switch-width: 2rem !default;

    $padding-left: 0;

    @if $size == 'xs' {
        $switch-handle-width: .8rem;
        $switch-width: 1rem;
        $switch-height: .5rem;
    }
    @else if $size == 'sm' {
        $switch-handle-width: 1.05rem;
        $switch-width: 1.5rem;
        $switch-height: .75rem;
    }
    @else if $size == 'md' {
        $switch-handle-width: 1.5rem;
        $switch-width: 2.5rem;
        $switch-height: 1.25rem;

        $padding-left: .5rem;
    }
    @else if $size == 'lg' {
        $switch-handle-width: 1.8rem;
        $switch-width: 3rem;
        $switch-height: 1.5rem;

        $padding-left: 1rem;
    }
    @else if $size == 'xl' {
        $switch-handle-width: 2.3rem;
        $switch-width: 4rem;
        $switch-height: 2rem;

        $padding-left: 2rem;
    }

    $handle-shadow: 0 3px 1px -2px rgba($black, 0.2), 0 2px 2px 0 rgba($black, 0.14), 0 1px 5px 0 rgba($black, 0.12) !default;

    .custom-control-input.custom-control-input-#{$size} {
        ~ .custom-control-label {
            padding-left: $padding-left;
            line-height: $switch-height;
            vertical-align: middle;

            &::before {
                width: $switch-width;
                height: $switch-height;
                border-radius: $switch-height / 2;
            }

            &::after {
                width: $switch-handle-width;
                height: $switch-handle-width;
                border-radius: 50%;
                box-shadow: $handle-shadow;
            }
        }

        &:checked ~ .custom-control-label::after {
            transform: translateX($switch-handle-width );
        }
    }
}

.custom-switch {
    @include switch('xs');
}

.custom-switch {
    @include switch('sm');
}

.custom-switch {
    @include switch('md');
}

.custom-switch {
    @include switch('lg');
}

.custom-switch {
    @include switch('xl');
}
